<template>
	<view>
		<view class="alldiv">
			<view class="headdiv">
				<!-- <web-view class="webView"  src="../../../static/map/homeMap.html" :fullscreen="false"  @message="onMessage"></web-view> -->
				<web-view style="background-color: #fafafa;" class="webview" ref="webview" :fullscreen="false"
					@message="getMessage" src="/hybrid/html/maps/reciverOrder.html"></web-view>
				<!-- <cover-image class="back" @click="returns" src="@/static/image/arrow-left.png"></cover-image> -->
			</view>

			<view class="bodydiv">
				<!-- 订单信息 -->
				<view class="order-info">
					<view class="title">
						{{ language.FreeRide.ddczjdck }}
					</view>
					<view class="wait-data">
						{{ language.FreeRide.qbcdhctsslyczxx }}
					</view>
				</view>

				<!-- 司机信息 -->
				<view class="driver-info">
					<view class="profile-photo mr10">
						<u-avatar :size="44" :src="driverInfo.headPortrait || profilePhoto"></u-avatar>
					</view>
					<!-- <view class="license-plate mr10">粤A·123456</view> -->
					<view>
						<view class="licence-plate">
							{{ driverInfo.licensePlateNum }}
						</view>
						<view class="vehicle-info">
							<text class="driver-name">{{ driverInfo.name }}</text> {{ driverInfo.carModel }}
						</view>
					</view>
					<view class="left">
						<a :href="'tel:' + driverInfo.mobile" class="contact-driver" v-show="driverInfo.mobile">
							<u-icon :name="dialPhoto"></u-icon>
						</a>
						<a class="contact-driver">
							<u-icon :name="messagePhoto"></u-icon>
						</a>
					</view>
				</view>

				<!-- 帮助 -->
				<view class="other-use">
					<view class="other-use-item" v-for="(item,i) in otherUseList" :key="item.id"
						@click="optionFun(item.id)">
						<u-icon :name="item.icon"></u-icon>
						<view class="name">{{ item.name }}</view>
					</view>
				</view>

				<view class="imagediv">
				  <u-swiper
						height="80"
						radius="67"
						circular
						:list="bannerList"
						keyName="picture"
				  >
				  </u-swiper>
				</view>

				<!-- 我已上车 -->
				<view class="onTheBus" v-show="orderId">
					<u-button class="onTheBus-btn" @click="onTheBus"
						shape="square">{{ language.FreeRide.onTheBus }}</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDriverInfo,
		getTaxiOrder,
		getOn,
		cancelOrder,
		getBannerList
	} from '@/api/driver'
	// import GoogleMap from "@/mixins/GoogleMap";
	export default {
		// mixins: [GoogleMap],
		data() {
			return {
				bannerList: [],
				language: {},
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
						latitude: 39.909,
						longitude: 116.39742,
						iconPath: "../../../static/location.png",
					},
					{
						latitude: 39.9,
						longitude: 116.39,
						iconPath: "../../../static/location.png",
					},
				],
				profilePhoto: require('@/static/image/BankCard.png'),
				dialPhoto: require('@/static/image/dial.png'),
				messagePhoto: require('@/static/image/message.png'),
				otherUseList: [{
						id: 0,
						icon: require('@/static/image/seek-help.png'),
						name: '紧急求助',
					},
					{
						id: 1,
						icon: require('@/static/image/phone.png'),
						name: '修改手机',
					},
					{
						id: 2,
						icon: require('@/static/image/service.png'),
						name: '客服中心',
					},
					{
						id: 3,
						icon: require('@/static/image/cancel.png'),
						name: '取消行程',
					}
				],
				orderId: 0,
				driverId: 0,
				driverInfo: {},
				intervalId: 0,
				wv: null,
				startLatLng: null
			}
		},
		async onLoad(option) {
			if (!option.id || !option.driverId) {
				this.returns()
			}
			this.orderId = option.id
			this.driverId = option.driverId
			this.getBannerList()
			this.getlanguagedata();
			this.getDriver(option.driverId);
			await this.getOrder()
			this.driverLocation()
			this.intervalId = setInterval(this.driverLocation, 3000)
		},
		beforeDestroy() {
			// wssocket.close();
			this.intervalId && clearInterval(this.intervalId)
		},
		onShow() {
			this.setHeight()
		},
		mounted() {
			this.setHeight()
		},
		methods: {
			async getBannerList() {
					try{
						const res = await getBannerList({
							pageNo: 1,
							pageSize: 100,
							status: 0,
							name: 2
						})
						if(res.code === 0) {
							this.bannerList = res.data
						}
					}catch(e){
						console.log(e,666)
					}
			},
			// 设置高度
			setHeight() {
				// 设置 iframe 高度和发送消息
				// #ifdef APP-PLUS
				let currentWebview = this.$scope.$getAppWebview();
				let boxHeight = 0
				uni.getSystemInfo({
						success: res => boxHeight = res.windowHeight // 屏幕可用高度
				})
				setTimeout(() => {
						this.wv = currentWebview.children()[0];
						this.wv.setStyle({ top: 0, height: 342,background:'transparent',zindex:1})
				}, 1000)
				// #endif
			},
			getMessage(res) {
				console.log(res)
				const data = (res.detail.data && res.detail.data[0]) || {};
				switch (data.action) {
					case 'initPosition':
						break;
				}
			},
			getlanguagedata() {
				this.language =
					this.$store.getters["internationalization/getinternationalization"];
			},
			returns() {
				uni.navigateTo({
					url: "/pages/Home/Home",
				});
			},
			onTheBus() {
				try {
					getOn({
						orderId: this.orderId
					}).then(res => {
						uni.navigateTo({
							url: `/pages/Home/freeRide/onTheRoad?id=${this.orderId}&driverId=${this.driverId}`,
						});
					})
				} catch (error) {
					console.log(error)
				}
			},
			// 获取司机信息
			getDriver(driverId) {
				try {
					getDriverInfo({
						id: driverId
					}).then(res => {
						this.driverInfo = res.data
					})
				} catch (error) {
					console.log(error)
				}
			},
			// 获取订单信息
			async getOrder() {
				try {
					await getTaxiOrder({
						id: this.orderId
					}).then(res => {
						if (Number(res.data.orderStatus) === 2) {
							// 已结束
							this.intervalId && clearInterval(this.intervalId)
							uni.navigateTo({
								url: `/pages/Home/freeRide/feeDetails?id=${this.orderId}`,
							});
							return
						}
						this.startLatLng = {
							latitude: parseFloat(res.data.startLatitude),
							longitude: parseFloat(res.data.startLongitude)
						};
					})
				} catch (error) {
					console.log(error)
				}
			},
			// 获取司机位置
			driverLocation() {
				getDriverLocation({
					driverld: this.driverId
				}).then(res => {
					if (res.data.x) {
						// 司机位置
						const endLatLng = {
							latitude: parseFloat(res.data.y),
							longitude: parseFloat(res.data.x)
						};
						this.wv?.evalJS(`initMap2(${JSON.stringify(endLatLng)}, ${JSON.stringify(this.startLatLng)})`);
					}
				})
			},
			optionFun(id) {
				if (!this.orderId) return
				switch (id) {
					case 3:
						// 取消行程
						uni.showLoading({
							title: 'loading...'
						});
						try {
							cancelOrder({
								orderId: this.orderId,
								orderStatus: 3
							}).then(res => {
								uni.showToast({
									title: this.language.Takingataxi.orderCancelSuccess,
									icon: "none"
								});
								uni.hideLoading();
								uni.navigateTo({
									url: `/pages/Home/freeRide/tripCancellation?id=${this.orderId}`,
								});
							}).catch(error => {
								uni.hideLoading();
							});
						} catch (error) {
							uni.hideLoading();
							console.log(error)
						}
						break;
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.alldiv {
		position: relative;
		width: 100%;
		height: 100vh;

		.headdiv {
			position: relative;
			width: 100%;
			height: 342px;
			overflow: hidden;
			.webView{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: unset!important;
				z-index: -1;
			}
			.back {
				position: absolute;
				left: -40rpx;
				top: 100rpx;
				width: 160rpx;
				height: 120rpx;
				transform:scale(0.5);
				z-index: 9999;
			}
		}

		.bodydiv {
			// margin-top: -20rpx;
			padding: 48rpx 32rpx;
			width: 100%;
			height: calc(100vh - 342px);
			border-radius: 20px 20px 0 0;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px -3px 6px rgba(6, 145, 161, 0.05);
			overflow-y: auto;

			// 订单信息
			.order-info {
				.title {
					font-size: 32rpx;
					font-weight: bold;
					line-height: 44rpx;
					color: rgba(56, 56, 56, 1);
				}

				.wait-data {
					font-size: 20rpx;
					line-height: 28rpx;
					color: rgba(153, 153, 153, 1);

					.time {
						color: rgba(47, 212, 184);
					}
				}
			}

			// 司机信息
			.driver-info {
				position: relative;
				margin-top: 24rpx;
				margin-bottom: 24rpx;
				display: flex;
				align-items: center;
				color: #333;
				font-weight: bold;
				font-size: 28rpx;
				line-height: 40rpx;

				.profile-photo {
					width: 80rpx;
					height: 80rpx;
				}

				.vehicle-info {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);

					.driver-name {
						margin-right: 12rpx;
					}
				}

				.left {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					display: flex;
					align-items: center;

					.contact-driver {
						margin-left: 24rpx;
						width: 60rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						text-decoration: none;
						border-radius: 50%;
						background: rgba(255, 255, 255, 1);
						box-shadow: 0px 2px 4px rgba(5, 48, 7, 0.1);

						img {
							width: 24rpx;

						}

						&:last-child img {
							width: 28rpx;
						}
					}
				}
			}

			.mr10 {
				margin-right: 20rpx;
			}

			// 其他操作
			.other-use {
				display: flex;
				justify-content: space-between;

				.other-use-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 144rpx;
					height: 120rpx;
					border-radius: 8rpx;
					background: rgb(255, 255, 255);
					box-shadow: 0px 2px 4px rgba(5, 48, 7, 0.1);

					.name {
						margin-top: 8rpx;
						color: rgba(102, 102, 102, 1);
						font-size: 24rpx;
						line-height: 32rpx;
					}

					.phoneImg {
						width: 11px;
					}
				}
			}

			.imagediv {
				margin-top: 16px;
			}

			.onTheBus {
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 236rpx;
				padding: 48rpx 70rpx;
				border-radius: 20px 20px 0px 0px;
				background: rgb(255, 255, 255);
				box-shadow: 0px -3px 6px rgba(5, 48, 7, 0.08);

				.onTheBus-btn {
					height: 88rpx;
					border-radius: 60rpx;
					background: linear-gradient(90deg, rgb(65, 240, 135) 0%, rgb(47, 212, 184) 100%);
					box-shadow: 0px -3px 6px rgba(5, 48, 7, 0.08);
					color: #fff;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}
	}
</style>